<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 | 注册</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    <script src="tailwind.config.js"></script>
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex items-center justify-center p-4 md:p-0">
    <div class="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
        <!-- 左侧图片区域 -->
        <div class="hidden md:flex md:w-1/2 bg-gradient-custom p-12 text-white flex flex-col justify-between">
            <div>
                <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 text-shadow">欢迎回来</h1>
                <p class="text-lg text-white/90 mb-8 max-w-md">
                    加入我们的社区，体验更多精彩功能。安全、简单、快速地访问您的账户。
                </p>
            </div>
            
            <div class="mt-auto space-y-6">
                <div class="flex items-center space-x-4 bg-white/10 p-4 rounded-lg backdrop-blur-sm">
                    <i class="fa fa-shield text-2xl"></i>
                    <div>
                        <h3 class="font-semibold">安全保障</h3>
                        <p class="text-sm text-white/80">您的数据将被全程加密保护</p>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4 bg-white/10 p-4 rounded-lg backdrop-blur-sm">
                    <i class="fa fa-bolt text-2xl"></i>
                    <div>
                        <h3 class="font-semibold">快速访问</h3>
                        <p class="text-sm text-white/80">一键登录，无需重复验证</p>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4 bg-white/10 p-4 rounded-lg backdrop-blur-sm">
                    <i class="fa fa-globe text-2xl"></i>
                    <div>
                        <h3 class="font-semibold">全球服务</h3>
                        <p class="text-sm text-white/80">随时随地访问您的账户</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧表单区域 -->
        <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col">
            <div class="mb-8 text-center md:text-left">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">
                    <span id="form-title">登录</span> 账户
                </h2>
                <p class="text-gray-500 mt-2" id="form-subtitle">
                    请输入您的账号信息登录
                </p>
            </div>
            
            <!-- 表单切换按钮 -->
            <div class="flex mb-8 rounded-lg overflow-hidden bg-neutral">
                <button id="login-tab" class="flex-1 py-3 px-4 bg-primary text-white font-medium transition-custom">
                    登录
                </button>
                <button id="register-tab" class="flex-1 py-3 px-4 text-gray-600 font-medium transition-custom">
                    注册
                </button>
            </div>
            
            <!-- 登录表单 -->
            <form id="login-form" class="space-y-5 flex-grow">
                <div class="space-y-2">
                    <label for="login-email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-envelope"></i>
                        </span>
                        <input type="email" id="login-email" 
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                               placeholder="请输入您的邮箱" required>
                        <div class="error-message" id="login-email-error"></div>
                    </div>
                </div>
                
                <div class="space-y-2">
                    <div class="flex justify-between">
                        <label for="login-password" class="block text-sm font-medium text-gray-700">密码</label>
                        <a href="forgot-password.html" class="text-sm text-primary hover:text-primary/80 transition-custom">忘记密码?</a>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="login-password" 
                               class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                               placeholder="请输入您的密码" required>
                        <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-custom toggle-password" data-target="login-password">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                        <div class="error-message" id="login-password-error"></div>
                    </div>
                </div>
                
                <button type="submit" 
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 active:translate-y-0">
                    登录
                </button>
            </form>
            
            <!-- 注册表单 (默认隐藏) -->
            <form id="register-form" class="space-y-5 flex-grow hidden">
                <div class="space-y-2">
                    <label for="register-name" class="block text-sm font-medium text-gray-700">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="register-name" 
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                               placeholder="请输入您的用户名" required>
                        <div class="error-message" id="register-name-error"></div>
                    </div>
                </div>
                
                <div class="space-y-2">
                    <label for="register-email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-envelope"></i>
                        </span>
                        <input type="email" id="register-email" 
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                               placeholder="请输入您的邮箱" required>
                        <div class="error-message" id="register-email-error"></div>
                    </div>
                </div>
                
                <div class="space-y-2">
                    <label for="register-password" class="block text-sm font-medium text-gray-700">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="register-password" 
                               class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                               placeholder="请设置密码（至少8位）" minlength="8" required>
                        <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-custom toggle-password" data-target="register-password">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                        <div class="error-message" id="register-password-error"></div>
                    </div>
                </div>
                
                <div class="space-y-2">
                    <label for="register-confirm" class="block text-sm font-medium text-gray-700">确认密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="register-confirm" 
                               class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                               placeholder="请再次输入密码" minlength="8" required>
                        <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-custom toggle-password" data-target="register-confirm">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                        <div class="error-message" id="register-confirm-error"></div>
                    </div>
                </div>
                
                <button type="submit" 
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 active:translate-y-0">
                    注册
                </button>
            </form>
            
            <!-- 分隔线 -->
            <div class="my-6 flex items-center">
                <div class="flex-grow h-px bg-gray-200"></div>
                <span class="px-4 text-gray-500 text-sm">或使用以下方式</span>
                <div class="flex-grow h-px bg-gray-200"></div>
            </div>
            
            <!-- 社交登录 -->
            <div class="grid grid-cols-3 gap-4">
                <button class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
                    <i class="fa fa-google text-lg"></i>
                </button>
                <button class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
                    <i class="fa fa-facebook text-lg"></i>
                </button>
                <button class="flex items-center justify-center py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-custom text-gray-700">
                    <i class="fa fa-weixin text-lg"></i>
                </button>
            </div>
            
            <!-- 底部文字 -->
            <p class="text-center text-gray-500 text-sm mt-8">
                <span id="toggle-text">还没有账号?</span> 
                <button id="toggle-button" class="text-primary font-medium hover:underline transition-custom">
                    立即注册
                </button>
            </p>
        </div>
        
    </div>
    
    <!-- 引入JavaScript -->
    <script src="script1.js"></script>
</body>
</html>
